<template>
  <div>
    <transition :name="transitionName">
      <router-view class="Router"></router-view>
    </transition>
    <cube-tab-bar v-model="selectedLabelDefault"
                  :data="tabs"
                  @change="changeHandler"
                  class="botnav">
    </cube-tab-bar>
    <span class="countSum">{{countSum}}</span>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Botnav',
  data () {
    return {
      transitionName: 'slide-right',
      selectedLabelDefault: '首页',
      tabs: [{
        label: '首页',
        icon: 'cubeic-home'
      }, {
        label: '分类',
        icon: 'cubeic-more'
      }, {
        label: '搜索',
        icon: 'cubeic-search'
      }, {
        label: '购物车',
        icon: 'cubeic-mall'
      }, {
        label: '我的',
        icon: 'cubeic-person'
      }]
    }
  },
  methods: {
    changeHandler (label) {
      switch (label) {
        case '首页':
          this.$router.replace('/botnav/index')
          break;
        case '分类':
          this.$router.push({ path: '/botnav/list' })
          break;
        case '搜索':
          this.$router.push({ path: '/botnav/search' })
          break;
        case '购物车':
          this.$router.push({ path: '/botnav/car' })
          break;
        case '我的':
          this.$router.push({ path: '/botnav/mine' })
          break;
      }
    }
  },
  computed: {
    ...mapGetters({
      countSum: 'countSum'
    })
  },
  created () {
    switch (this.$route.path) {
      case '/baonav/index':
        this.selectedLabelDefault = '首页';
        break;
      case '/baonav/list':
        this.selectedLabelDefault = '分类';
        break;
      case '/baonav/search':
        this.selectedLabelDefault = '搜索';
        break;
      case '/baonav/car':
        this.selectedLabelDefault = '购物车';
        break;
      case '/baonav/mine':
        this.selectedLabelDefault = '我的';
        break;
    }
  }
}

</script>

<style lang="stylus" scoped>
.botnav >>> .cube-tab
  font-size: 19px
.cube-tab-bar.botnav
  position: fixed
  bottom: 0
  left: 0
  z-index: 1000
  width: 100%
  background: #fff
  .cube-tab div
    padding-top: 3px
  i
    font-size: 20px
.Router
  position: absolute
  width: 100%
  transition: all 0.8s ease
.slide-left-enter, .slide-right-leave-active
  opacity: 0
  -webkit-transform: translate(100%, 0)
  transform: translate(100%, 0)
.slide-left-leave-active, .slide-right-enter
  opacity: 0
  -webkit-transform: translate(-100%, 0)
  transform: translate(-100%, 0)
.countSum
  position: fixed
  bottom: 33px
  right: 23%
  z-index: 1001
  width: 18px
  height: 18px
  line-height: 18px
  border-radius: 50%
  font-size: 14px
  background: red
  color: #fff
</style>
